<script setup>
  import { ref } from 'vue';
  // 要不要变为响应式就要考虑视图要不要随着数据的更新而更新
  // jQury 与 vue 的区别之一就是 vue 可以通过修改数据而实现视图的更新 （响应式），而 jQury 通常是直接修改视图

  // 图书列表
  const bookList = ref([{
    id: 1,
    name: '《红楼梦》',
    author: '曹雪芹'
  },{
    id: 2,
    name: '《西游记》',
    author: '吴承恩'
  },{
    id: 3,
    name: '《水浒传》',
    author: '施耐庵'
  },{
    id: 4,
    name: '《三国演义》',
    author: '罗贯中'
  }])

  // 删除图书
  const del = (index) => {
    // splice 是将原来的数组进行更新 并返回删除的值
    // bookList.value = bookList.value.splice(index, 1)
    if (window.confirm('确认删除吗？')) {
      bookList.value.splice(index, 1)
    }
  }
</script>


<template>
  <h4>比特人的书架</h4>
  <!-- 
    key 的类型只能是 字符串或数字
    key 的作用是可以提高更新的效率 通过key 可以尽可能保存DOM 提高DOM 的复用性
  -->
  <!-- 没有key -->
  <ul>
    <li v-for="book, index in bookList">
      <span>{{ book.name }}</span>
      <span>{{ book.author }}</span>
      <button @click="del(index)">删除</button>
    </li>
  </ul>
  <!-- 有key并且为id -->
  <ul>
    <li v-for="book, index in bookList" :key="book.id">
      <span>{{ book.name }}</span>
      <span>{{ book.author }}</span>
      <button @click="del(index)">删除</button>
    </li>
  </ul>
</template>



<style>
  #app {
    width: 400px;
    margin: 100px auto;
  }
  ul {
    list-style: none;
  }
  ul li {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
</style>


